<template>
  <Model-bg
    title="业务信息（月）"
    :width="467"
    :height="293"
    :top="15"
    router="/srceen/business"
  >
    <Line-chart
      cid="business"
      :x-axis="xlist"
      :data="dataList"
      type="bar"
      :tooltip="false"
      bar-width="20%"
      leg-right="4%"
      leg-top="0%"
      grid-top="12%"
      :colors="[
        ['#2860F8', 'rgba(40,96,248,0.1)'],
        ['#F69D15', 'rgba(246,157,21,0.25)'],
      ]"
      unit="单位/平方米"
    />
  </Model-bg>
</template>
<script>
import { mapState } from "vuex";
import { screenBusiness } from "@/api/srceen/home";
export default {
  data() {
    return {
      xlist: [],
      dataList: [],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      screenBusiness().then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis || [];
          this.dataList = [
            { data: res.data.target || [], name: "目标" },
            { data: res.data.actual || [], name: "订单" },
          ];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#business {
  width: 100%;
  height: 100%;
}
</style>
